<template>
  <div>
    <el-card>
      <!-- header -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form :inline="true">
            <el-form-item
              label-width="120px"
              size="mini"
              style="margin-top: 7px"
            >
              <el-input placeholder="根据用户名搜索" width="80%"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini">清空</el-button>
              <el-button size="mini" type="primary">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-plus"
              @click="showDialog = true"
              >新增用户</el-button
            >
          </el-row>
        </el-col>
      </el-row>

      <!-- 警示框 -->
      <el-alert title="共2条记录" type="info" show-icon :closable="false">
      </el-alert>

      <!-- 表格 -->
      <el-table style="width: 100%" border>
        <el-table-column align="center" label="序号" type="index" width="width">
        </el-table-column>
        <el-table-column align="center" label="邮件" width="width">
        </el-table-column>
        <el-table-column align="center" label="联系电话" width="width">
        </el-table-column>
        <el-table-column align="center" label="用户名" width="width">
        </el-table-column>
        <el-table-column align="center" label="权限组名称" width="width">
        </el-table-column>
        <el-table-column align="center" label="角色" width="width">
        </el-table-column>
        <el-table-column align="center" label="操作" width="width">
          <template slot-scope="{ row }">
            <el-button type="text" icon="el-icon-edit"></el-button>
            <el-button type="text" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页器 -->
      <Pagination />

      <!-- 新增用户弹窗 -->
      <AddUser :showDialog.sync="showDialog" />
    </el-card>
  </div>
</template>

<script>
import AddUser from "./AddUser.vue";
export default {
  name: "User",
  data() {
    return {
      showDialog: false,
    };
  },
  components: { AddUser },
};
</script>

<style>
</style>